<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间线</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap4.5.min.js"></script>
</head>

<style>
    /*https://fkwjnpx09.jz.fkw.com/?previewDemo=true      关于我们  发展历程*/


    .feature_list {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .feature_left {
        width: 50%;
        padding-left: 40px;
    }

    .feature_left ul li p {
        color: var(--c_text);
        font-size: var(--f_text);
        line-height: var(--l_text);
        display: inline-block;
    }

    .feature_left ul li {
        padding: 30px 0;
        border-bottom: 1px solid #e4e4e4;
    }

    .feature_left ul li:last-child {
        border-bottom: 0;
    }

    .feature_left ul li p:nth-child(1) {
        color: var(--c_time);
    }

    .feature_left ul li p:nth-child(2) {
        padding-left: 40px;
    }

    .feature_right {
        padding-left: 0;
        width: 50%;
    }

    .feature_right ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        height: 348px;
    }


    .feature_right ul li {
        padding: 30px 20px;
        display: inline-block;
        width: 50%;
    }

    .feature_right ul li img {
        width: 100%;
        height: 100%;
    }

    @media(max-width:1100px) {

        .feature_left ul li p {
            width: 100%;
        }

        .feature_left ul li {
            padding: 30px 0;
        }

        .feature_left ul li p:nth-child(2) {
            padding-left: 0px;
            padding-top: 14px;
        }

        .feature_right {
            padding-left: 0;
            width: 50%;
        }

        .feature_right ul {
            flex-wrap: wrap;
            flex-direction: column;
            height: 100%;
        }


        .feature_right ul li {
            padding: 15px 20px 15px 20px;
            display: inline-block;
            width: 100%;
            height: 310px;
        }

        .feature_right ul li img {
            width: 100%;
            height: 100%;
        }
    }

    @media(max-width:768px) {
        .feature_left ul li {
            padding: 10px 0;
        }

        .feature_right ul li {
            padding: 15px 0px 15px 0;
            height: 230px;
        }
    }

    @media(max-width:575px) {
        .feature_right ul li {
            height: 180px;
        }
    }

    @media(max-width:450px) {
        .feature_right ul li {
            height: 130px;
        }
    }
</style>

<body>

    <div class="feature modular title_center">
        <div class="public_title">
            <h2>发展历程</h2>
            <p>DEVELOPMENT COURSE</p>
        </div>

        <div class="public_width">
            <div class="feature_list">
                <div class="feature_left">
                    <ul>
                        <li>
                            <p>2018-10-10 </p>
                            <p>授权“球会及高尔夫俱乐部教育培训专业管理中心”</p>
                        </li>
                        <li>
                            <p> 2015-10-10 </p>
                            <p>授权“全国青少年体育运动领导小组办公室”</p>
                        </li>
                        <li>
                            <p>2009-10-10 </p>
                            <p>经调研，教学口碑在教育培训业内收到一致好评</p>
                        </li>

                        <li>
                            <p>1990-10-10 </p>
                            <p> 创立专业规范的高尔夫培训练习场</p>
                        </li>

                    </ul>
                </div>

                <div class="feature_right">
                    <ul>
                        <li>
                            <img src="../images/case_list_2_1.jpg" alt="">
                        </li>
                        <li>
                            <img src="../images/case_lists_three.webp" alt="">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</body>

</html>